<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="m/head :: head"></div>

    <title>注册</title>
</head>
<body>
<div class="loginwrap">
    <div class="login-title">
        <a href="javascript: window.history.back(-1)">取消</a>
    </div>
    <div class="login-con">
        <div class="logo">
            <img th:src="@{/static/m/img/register-text.png}"/>
        </div>
        <div class="logo-text">
            <img th:src="@{/static/m/img/login-text.png}"/>
        </div>
        <form id="registerForm" th:action="@{/regist/one}" method="post">
            <div class="login-input">
                <div class="login-text clearfix">
                    <div class="left">
                        手机号
                    </div>
                    <div class="right">
                        <input type="text" class="mobile-for-sms-code" name="mobile" id="mobile" required minlength="8" value="" placeholder="输入手机号"/>
                    </div>
                </div>
                <div class="login-text">
                    <div class="left">
                        设置密码
                    </div>
                    <div class="right">
                        <input type="password" name="password" id="password" required minlength="6" maxlength="20" value="" placeholder="6-16位字母、数字、下划线"/>
                    </div>
                </div>
                <div class="verify-text clearfix">
                    <div class="login-text" style="float: left;">
                        <div class="left">
                            输入验证码
                        </div>
                        <div class="right">
                            <input type="text" name="validate" id="validate" required value="" placeholder="输入短信验证码"/>
                        </div>
                    </div>
                    <a href="javascript:void(0)" class="verify-btn get-sms-code">获取验证码</a>
                </div>
                <p class="error" th:text="${error}"></p>
            </div>
            <div class="login-link clearfix">
                <span class="checkBox" id="agreement"></span>
                <p>已阅读并同意</p>
                <a href="javascript:void(0)" style="color: #ff5722;">《巨桃游娱》</a>
            </div>
            <input type="button" class="submit" id="submit-btn" value="下一步"/>
        </form>
        <a th:href="@{/login}" class="iphone">转到登录</a>
    </div>
</div>

</body>

<div th:replace="m/foot :: footer('baidu.hide')"></div>

<script type="text/javascript" th:src="@{/static/common/jquery.validate/jquery.validate.min.js}"></script>
<script type="text/javascript" th:src="@{/static/common/jquery.validate/jquery.validate.custom.js}"></script>

<script>
    $(function () {
        $('input').focus(function () {
            setTimeout(function () {
                $('.error').text('');
            }, 1000);
        })

        var $getSmsCode = $('.get-sms-code');
        var $submitBtn = $('#submit-btn');
        var getSmsCodeStyle = $getSmsCode.attr('style') ? $getSmsCode.attr('style') : '';
        var submitBtnStyle = $submitBtn.attr('style') ? $submitBtn.attr('style') : '';
        $getSmsCode.css('background', 'rgb(211, 211, 211)');
        $submitBtn.css('background', 'rgb(211, 211, 211)')
        $('input[name="mobile"]').change(function () {
            if ($.trim(this.value).length != 0 && Pattern.CHINA_MOBILE.test($('input[name="mobile"]').val())) {
                $('#submit-btn').attr('disabled', false);
                $('.get-sms-code').removeAttr('disabled');
                $getSmsCode.attr('style', getSmsCodeStyle);
                $submitBtn.attr('style', submitBtnStyle);
            } else {
                $('#submit-btn').attr('disabled', true);
                $('.get-sms-code').attr('disabled', true);
                $getSmsCode.css('background', 'rgb(211, 211, 211)');
                $submitBtn.css('background', 'rgb(211, 211, 211)')
            }
        })

        $('#submit-btn').click(function () {
            if (!($('input[name="mobile"]').val() && Pattern.CHINA_MOBILE.test($('input[name="mobile"]').val()))) {
                $('.error').text('请输入正确的手机号码');
                return false;
            }

            if (!Pattern.PWD.test($('input[name="password"]').val())) {
                $('.error').text('密码格式错误');
                return false;
            }

            if (!Pattern.VALIDATE.test($('input[name="validate"]').val())) {
                $('.error').text('短信验证码格式错误');
                return false;
            }

            if (!$('#agreement').hasClass('on')) {
                $('.error').text('请仔细阅读注册协议后点击同意');
                return false;
            }

            $('.error').text('');

            window.registerForm.submit();
        })
    })
</script>

</html>
